<template>
  <div class="findPwd">
    <Header title="找回密码" />

    <div class="findPwd-content">
      <el-form class="findPwd-form" :label-width="100" ref="formRef" :model="findPwdData.form" :show-message="false">
        <el-form-item label="登录手机号:" prop="loginPhone" :rules="{ required: true, validator: validatePhone, trigger: 'blur' }">
          <el-input class="site-input" v-model="findPwdData.form.loginPhone" clearable></el-input>
        </el-form-item>
        <el-form-item label="短信验证码:" prop="captcha" required>
          <div class="captcha">
            <el-input v-model="findPwdData.form.captcha" clearable></el-input>
            <Button class="captcha-btn" label="获取验证码" @click="onGetCaptchaClick" />
          </div>
        </el-form-item>
        <el-form-item label="设置新密码:" prop="password" :rules="{ required: true, validator: validatePassword, trigger: 'blur' }">
          <el-input type="password" class="site-input" v-model="findPwdData.form.password" placeholder="长度应为6-15个字符,必须包含大写、小写字母和数字" clearable show-password></el-input>
        </el-form-item>
        <el-form-item label="确认新密码:" prop="newPassword" :rules="{ required: true, validator: validateNewPwd, trigger: 'blur' }">
          <el-input type="password" class="site-input" v-model="findPwdData.form.newPassword" placeholder="再次输入密码" clearable show-password></el-input>
        </el-form-item>
        <el-form-item>
          <Button class="btn" label="提交" @click="onSubmitClick" />
        </el-form-item>
      </el-form>
    </div>
    <Banner />
    <Footer />
  </div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import md5 from 'js-md5'
import api from '@/api'
import Header from '@/components/header/login.vue'
import Banner from '@/components/footer/banner.vue'
import Footer from '@/components/footer/index.vue'
import Button from '@/components/button/button.vue'

const router = useRouter()

const formRef = ref(null)
const offlineForm = ref(null)

const findPwdData = reactive({
  form: {}
})

const validatePhone = (rule, value, callback) => {
  const reg = /^1[3456789]\d{9}$/
  if (!value || !reg.test(value)) {
    callback(new Error())
  } else {
    callback()
  }
}



const validatePassword = (rule, value, callback) => {
  const reg = /^(?=.*[a-z].*)(?=.*[A-Z].*)(?=.*[0-9].*)[a-zA-Z0-9^%&*@#,;\=\?\!$]{6,15}$/
  if (!value || !reg.test(value)) {
    callback(new Error())
  } else {
    callback()
  }
}

const validateNewPwd = (rule, value, callback) => {
  if (value && value === findPwdData.form.password) {
    callback()
  } else {
    callback(new Error())
  }
}

const changePwd = async () => {
  let { err } = await api.post(`/medinstrument/site/customer/changePasswordByCaptcha?captcha=${findPwdData.form.captcha}&loginPhone=${findPwdData.form.loginPhone}&newPassword=${md5(findPwdData.form.newPassword)}`)
  if (err) {
    ElMessage.error(err)
  } else {
    ElMessage.success('密码修改成功')
  }
}

const sendMessage = async () => {
  let params = { mobile: findPwdData.form.loginPhone, smsType: 'CHANGE_PASSWORD' }
  let { err } = await api.post('/medinstrument/site/sms/sendMessage', params)
  if (err) {
    ElMessage.error(err)
  } else {
    ElMessage.success('发送成功')
  }
}

const onGetCaptchaClick = () => {
  sendMessage()
}

const onSubmitClick = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      changePwd()
    }
  })
}
</script>
<style scoped lang="less">
.findPwd {
  width: 100%;
  height: 100%;

  .findPwd-content {
    width: 1080px;
    height: calc(100% - 457px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;

    .findPwd-form {
      margin-top: 60px;

      .site-input {
        width: 430px;
      }

      .captcha {
        width: 100%;
        display: flex;
        align-items: center;
        .el-input {
          height: 40px;
        }

        .captcha-btn {
          width: 140px;
          height: 40px;
          color: var(--color-primary);
          border-color: var(--color-primary);
          font-size: 14px;
          background-color: #fff;
          cursor: pointer;
          margin-left: 12px;
        }
      }

      .btn {
        width: 58px;
        height: 34px;
        background-color: var(--color-primary);
        color: #fff;
        border: 0;
        cursor: pointer;
      }
    }
  }
}

.findPwd-box {
  border: 1px solid #dedede;
  display: block;
  position: relative;
  min-height: 470px;
  box-sizing: border-box;
}

.title {
  display: block;
  height: 40px;
  padding: 40px;
  font-size: 30px;
  line-height: 40px;
  text-align: center;
  border-bottom: 1px solid #eee;
  overflow: hidden;
}

.form-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
}
.form-box .text {
  display: inline-block;
  font-size: 14px;
  margin-left: 18%;
}

.form-item :deep(.el-form-item__content) {
  justify-content: center;
}
:deep(.input) {
  width: 300px;
  margin: 0;
}

.el-button {
  background: #4580f7;
  color: #fff;
}

.footerBottom {
  width: 100%;
  height: 172px;
  background: #3e424c;
  border-top: 2px solid var(--color-primary);
  text-align: center;
  .beian {
    font-size: 14px;
    color: #ffffff;
    letter-spacing: 0;
    line-height: 18px;
    font-weight: 400;
    margin-top: 40px;
  }
  .footerImage {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    img {
      margin-left: 10px;
    }
  }
}
</style>
